<template>
    <div class="item">
        <div class="item-header">
            <p>设备佩戴率</p>
            <img src="../img/title_bor.png" alt="">
        </div>
        <div class="item-chart" id="WearRate"/>
    </div>
</template>

<script>
    import elementResizeDetectorMaker from 'element-resize-detector';
    var erd = elementResizeDetectorMaker(); //创建实例
    export default {
        data() {
            return {
                chart: null,
            }
        },
        mounted() {
            this.chart = this.$echarts.init(document.getElementById('WearRate'))
            // 绘制图表
            this.chart.setOption({
                grid:{
                    top: '15px',
                    left: '15px',
                    right: '15px',
                    bottom: '15px',
                    containLabel: true
                },
                color: ['#aaeeff', '#79daff', '#2383ff'],
                series: [{
                        type: "pie",
                        data: [{
                            value: 100,
                            name: "未使用"
                        }, {
                            value: 210,
                            name: "未佩戴"
                        }, {
                            value: 400,
                            name: "佩戴中"
                        }],
                    roseType: "radius",
                    radius: ["63%", "75%"],
                    startAngle: 180
                    }]
            });
            erd.listenTo(this.$el,()=>{
                this.chart.resize();
            });
        }
    }
</script>

<style scoped lang="less">
    @import "index";
</style>
